<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>View generation -- Model-bound generation example with a store, commit and reset</title>

		<script src="../../../../dojo/dojo.js"
				type="text/javascript"
				djConfig="isDebug: true, parseOnLoad: true">
		</script>
		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../../dijit/themes/claro/claro.css";			
		</style>
		<script type="text/javascript" >
			dojo.require("dojox.mvc");
			dojo.require("dojox.mvc.Generate");
			dojo.require("dijit.form.Textarea");
			dojo.require("dijit.form.Button");
			dojo.require("dojo.data.ItemFileReadStore");
			dojo.require("dojo.data.ItemFileWriteStore");
			dojo.require("dojo.store.DataStore");
			dojo.require("dojo.parser");

			var model;

			function setup(){
				var theWriteStore = new dojo.data.ItemFileWriteStore({url: dojo.moduleUrl("dojox.mvc.tests.regression._data", "mvcGenerateData.json")});
				// this is used to see what would have been written out if we were using a real service
				theWriteStore._saveEverything = function(c, e, n){
					console.log(n);
					c.call();
				};
				var theDataStore = new dojo.store.DataStore({store: theWriteStore});
				var theModelPromise = dojox.mvc.newStatefulModel({store: theDataStore});  // query() returns a deferred.promise
				theModelPromise.then(function(theStatefulModel){
					model = theStatefulModel;
					dijit.byId("view").set("ref", "model");
				});
			};

			dojo.addOnLoad(setup);
		</script>
	</head>
	<body class="claro">
		<div id="wrapper">
		<div id="header">
		  <div id="navigation">
		  </div>
		  <div id="headerInsert">
			<h1>View generation example</h1>
			<h2>Data Binding - Generate Container, with a store, commit and reset.</h2>
		  </div>
		</div>
		<div id="main">
		  <div id="leftNav">
		  </div>
			<div id="mainContent">
				<h3>Generated View</h3>
				<div id="view" data-dojo-type="dojox.mvc.Generate">
				</div>
				<div class="row">
					<div class="spacer"></div>
					<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model.commit();}">Commit</button>
					<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model.reset();}">Reset</button>
				</div>
			</div>
		</div>
		</div>
	</body>
</html>
